<!DOCTYPE HTML>
<!-- <no_layout name="Layout\layout" />  -->

	<!-- main content start-->			
		<h3 class="title1">{$isfromcollect?'习题闪回':'随机练习'}<span class="label label-warning" style="background-color:#e94e02;padding: .1em .2em .1em;vertical-align:middle;margin-left:1%;font-size:35%">{$item.id}</span></h3>
		<!-- <form action="{:U('Random/recordOption')}" method='POST'> -->
		<form  method='POST'>
		<div class="inbox-page card pressthis">
			<h4>{$item.que_type}</h4>
			<div class="inbox-row widget-shadow" id="accordion" role="tablist" aria-multiselectable="true">																	
				<!-- <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> -->
					<div class="mail"><p style="font-size:1.2em">{$item.question}</p></div>
				<!-- </a>												 -->
				<div class="clearfix"> </div>						
			</div>
			<div class="inbox-row widget-shadow" id="accordion" role="tablist" aria-multiselectable="true">
				<div class="mail " style="display: inline-block;"> <input type="checkbox" class="checkbox" id="optA" onclick="radio(this);"> </div>												
				<!-- <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> -->
					<div class="mail"  style="display: inline-block;"><p>{$item.opta}</p></div>
				<!-- </a>												 -->
				<div class="clearfix"> </div>						
			</div>
			<div class="inbox-row widget-shadow" id="accordion" role="tablist" aria-multiselectable="true">
				<div class="mail " style="display: inline-block;"> <input type="checkbox" class="checkbox" id="optB" onclick="radio(this);"> </div>												
				<!-- <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> -->
					<div class="mail" style="display: inline-block;"><p>{$item.optb}</p></div>
				<!-- </a>												 -->
				<div class="clearfix"> </div>						
			</div>
			<div class="inbox-row widget-shadow" id="accordion" role="tablist" aria-multiselectable="true">
				<div class="mail " style="display: inline-block;"> <input type="checkbox" class="checkbox" id="optC" onclick="radio(this);"> </div>												
				<!-- <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> -->
					<div class="mail" style="display: inline-block;"><p>{$item.optc}</p></div>
				<!-- </a>												 -->
				<div class="clearfix"> </div>						
			</div>
			<div class="inbox-row widget-shadow" id="accordion" role="tablist" aria-multiselectable="true">
				<div class="mail "style="display: inline-block;"> <input type="checkbox" class="checkbox" id="optD" onclick="radio(this);"> </div>												
				<!-- <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> -->
					<div class="mail" style="display: inline-block;"><p>{$item.optd}</p></div>
				<!-- </a>												 -->
				<div class="clearfix"> </div>						
			</div>														
		</div>
		<!-- display loading div  -->
		<div id="myLoading"></div>
		<!-- display right answer & explain-->
		<div class="inbox-page card pressthis" style="display:none" id="analysis">				    
			<h4 style="margin-top:3%">答案及解析</h4>
			<div class="inbox-row widget-shadow" id="analysis1" role="tablist" aria-multiselectable="true">	
			</div>
			<div class="inbox-row widget-shadow" id="analysis2" role="tablist" aria-multiselectable="true">	
			</div>
		<!-- chart	 -->
					
		<!-- chart end -->
		</div>
		
		<!-- display right answer & explain end-->
		<div class="mail-body" style="border:none;margin:0px;margin-right:10%;padding-left: 40%;text-align:right;">							
				<a role="button" data-toggle="collapse"  href="#collapseThree" aria-expanded="true" aria-controls="collapsethree">
					<input type="submit" id="comment" value="Comment" style="display:none">
				</a>
				<input type="submit" id="mark" value="Mark" style="display:none">
				<input type="submit" id="submit" value="Confirm" >				
				<input type="submit" id="next" value="Next" style="display:none" >
				<input name="openid" id="openid" value="{$openid}" type="hidden"  />						
												
				<input name="starttime" id="starttime" value="{$starttime}" type="hidden" />									
		</div>				
		</form>	
				<input name="itemid" id="itemid" value="{$item.id}" type="hidden" />	

		<!-- display right answer & explain-->
		<div class="inbox-page card pressthis"  id="div_comment" style="display:none">	
	
			<!-- <div class="inbox-row widget-shadow" id="comment1" role="tablist" aria-multiselectable="true" > -->
				<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
					
					<h4 style="margin-top:3%">评论</h4>
					<div class="mail-body col-md-8 my-mail-body" style="background-color:white;" id="comment_context">
						<h6>
						{$comments?'':'还没有人评论，抢个沙发吧~'}
						<volist name="comments" id="vo">
						{$vo.class} {$vo.name}: {$vo.comment} <br />
						</volist>
						</h6>
						<form>
							<input type="text" placeholder="Reply to sender" required="" id="textcomment">
							<input type="submit" value="Send" id="setcomment">
						</form>
					</div>
					<div class="charts">					
						<div class="col-md-4 charts-grids widget">
							<h4 class="title">各选项选择人数</h4>
							<canvas id="pie" height="300px" width="400px"> </canvas>
							<div id="legend"></div>`
						</div>
						
						<div class="clearfix"> </div>												
					</div>	
				</div>
			<!-- </div> -->
			
		</div>
		
		<script>
			//console.log('对象：',obj1);	
			
			function radio(checkbox) {
                $('input[type=checkbox]').prop('checked', false);
				$(checkbox).prop('checked',true);
				answer = $(checkbox).attr("id");
            }
			function changeMark()
			{																								
				$('#mark').attr("disabled","disabled");																	
				$('#mark').css('color','#777');	
							
			}
			var chartDates = {};
			function initChart(){
				var chartData = [
					{
						value: chartDates['a'],
						color:"rgba(233, 78, 2, 1)",
						label: "A"
					},
					{
						value : chartDates['b'],
						color : "rgba(242, 179, 63, 1)",
						label: "B"
					},
					{
						value : chartDates['c'],
						color : "rgba(88, 88, 88,1)",
						label: "C"
					},
					{
						value : chartDates['d'],
						color : "rgba(79, 82, 186, 1)",
						label: "D"
					}
					
				];															
				var myChart = new Chart(document.getElementById("pie").getContext("2d")).Doughnut(chartData);
				var legend = myChart.generateLegend();
				$("#legend").append(legend);
				
			}
			if('{$isfromcollect}' == "1"){
				$('#next').val("Back");
				$("#next").attr("onclick","event.preventDefault();location.href='{$backurl}?itemid={$item.id}';");
				
			}			
			$("#comment").click(function(){
				event.preventDefault();
				$('#div_comment').show();
			});
			$("#setcomment").click(function(event){
				event.preventDefault();
				
				var ajaxData ={};
				ajaxData['itemid'] = $('#itemid').val();
				ajaxData['openid'] = $('#openid').val();				
								
				ajaxData['textcomment'] = $("#textcomment").val();			
				ajaxData['__hash__'] = $('[name=__hash__]').attr('content');
				if(ajaxData['textcomment']==''){
					alert('Please input comment!');
					return false;
				}
			
				//ajaxData['__hash__'] = document.getElementsByName("__hash__")[0].content;		
				$.ajax({
                    cache:false,
                    type:"POST",
					//async:false,
					//contentType:
                    url:"{:U('Random/setComment')}",
                    dataType:"json",
                    data: ajaxData,
                    timeout:30000,
                    error:function(XMLHttpRequest, textStatus,errorThrown){                      
						return false;
                    },
                    success:function(jsApiParameters){
						if(jsApiParameters=='非法的请求方式' || typeof(jsApiParameters) == "undefined") {alert("网络问题，请稍后答题！");return false;}														
						var comment_context_add = jsApiParameters['class']+" "+jsApiParameters['username']+":"+jsApiParameters['comment']+"<br />";
						if('{$comments?'':'还没有人评论，抢个沙发吧~'}' == '')
						{									
							$("#comment_context h6").append(comment_context_add);
						}else{	
						
							$("#comment_context h6").html(comment_context_add);							
							
						}
						
						$("#textcomment").val('');
						$('#textcomment').attr("disabled","disabled");																	
						$('#textcomment').css('color','#777');	
																							
                    }
                });	
			});
			
			$("#submit").click(function(event){
				event.preventDefault();
				if(answer=='no'){
					alert('Please select one option!');
					return false;
				}
				$("#myLoading").show();
				
				var ajaxData ={};
				ajaxData['itemid'] = $('#itemid').val();
				ajaxData['openid'] = $('#openid').val();				
				ajaxData['starttime'] = $('#starttime').val();				
				ajaxData['answer'] = answer;				
				ajaxData['__hash__'] = $('[name=__hash__]').attr('content');		
				//ajaxData['__hash__'] = document.getElementsByName("__hash__")[0].content;		
				$.ajax({
                    cache:false,
                    type:"POST",
					//async:false,
					//contentType:
                    url:"{:U('Random/getRightans')}",
                    dataType:"json",
                    data: ajaxData,
                    timeout:30000,
                    error:function(XMLHttpRequest, textStatus,errorThrown){                      
						return false;
                    },
                    success:function(jsApiParameters){
						if(jsApiParameters=='非法的请求方式' || typeof(jsApiParameters) == "undefined") {alert("网络问题，请稍后答题！");return false;}										
						var rightans     = "#opt"+jsApiParameters['rightans'];
						var que_analysis = jsApiParameters['que_analysis'];
						$("#myLoading").hide();
						$('#analysis').show();
						if($(rightans).prop('checked')){
							var tmp = "<h3 style=\"color:red\" id=\"right_lab\" value=\"1\">正确</h3>";
						}else var tmp = "<h3 style=\"color:red\" id=\"right_lab\" value=\"0\">错误</h3>";
						$('#analysis1').html(tmp+"<p>参考答案："+jsApiParameters['rightans']+"</p>");
						$('#analysis2').html("<p>解析：</p>"+"<h3>"+que_analysis);
						$('#next').show();
						if({$iscollect?'1':'0'}) {					
							$('#mark').val("Marked");
							changeMark();
						} 						
						$('#mark').show();
						$("#comment").show();
						$('#submit').css('display','none');
											
                    }
                });	
								
			});
			$("#mark").click(function(event){
				event.preventDefault();		
				var ajaxData ={};
				ajaxData['itemid'] = $('#itemid').val();
				ajaxData['openid'] = $('#openid').val();											
				ajaxData['right_lab'] = $('#right_lab').html();				
				ajaxData['__hash__'] = $('[name=__hash__]').attr('content');		
				//ajaxData['__hash__'] = document.getElementsByName("__hash__")[0].content;		
				$.ajax({
                    cache:false,
                    type:"POST",
                    url:"{:U('Random/setCollect')}",
                    dataType:"json",
                    data: ajaxData,
                    timeout:30000,                  
                    success:function(jsApiParameters){
						if(jsApiParameters=='非法的请求方式' || typeof(jsApiParameters) == "undefined") {alert("网络问题，请稍后答题！");return false;}										
						var markcount = jsApiParameters;
						
						$('#mark').val("Marked"+"("+markcount+")");	
						changeMark();							
                    }
                });												
			});	
			$("#comment").click(function(event){
				if($.isEmptyObject(chartDates)){
					var ajaxData ={};
					ajaxData['itemid'] = $('#itemid').val();
					ajaxData['openid'] = $('#openid').val();	
					$.ajax({
						cache:false,
						type:"POST",
						url:"{:U('Random/getOptionNum')}",
						dataType:"json",
						data: ajaxData,
						timeout:30000,                  
						success:function(jsApiParameters){
							if(jsApiParameters=='非法的请求方式' || typeof(jsApiParameters) == "undefined") {alert("网络问题，请稍后答题！");return false;}										
							chartDates = jsApiParameters;											
						}
					});		
				}
				setTimeout("initChart()",1000);				
			});
		</script>
	<!-- main content end-->
	